<template>
  <div class="app-container" style="background: black">
    <el-row>
      <el-col :span="8"><dv-decoration-8 style="width: 300px; height: 50px" /></el-col>
      <el-col :span="8"
        ><dv-decoration-7 style="height: 50px; color: white"><h1>涂装车间生产实时看板</h1></dv-decoration-7></el-col
      >
      <el-col :span="8"><dv-decoration-8 :reverse="true" style="width: 300px; height: 50px; float: right" /></el-col>
    </el-row>
    <digitalFlop />

    <div>
      <el-row :gutter="2">
        <el-col :span="8"><div class="charts" id="process"></div></el-col>
        <el-col :span="8"><div class="charts" id="status"></div></el-col>
        <el-col :span="8"><div class="charts" id="goodrate"></div></el-col>
      </el-row>
    </div>
    <vxe-table border resizable align="center" ref="xTable" :data="OperationList" :row-style="rowClassName" class="vxe-UI">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="online_time" title="上线时间"></vxe-column>
      <vxe-column field="work_order" title="工单" type="html"></vxe-column>
      <vxe-column field="partNO" title="零件号"></vxe-column>
      <vxe-column field="ProductionQuantity" title="计划数量"></vxe-column>
      <vxe-column field="productedNum" title="完成数量"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import * as echarts from 'echarts'
import digitalFlop from './digitalFlop'

export default {
  name: 'tuzhuangworkshop',
  data() {
    return {
      OperationList: [
        {
          online_time: '8:25',
          partNO: '359951',
          work_order: 'W0862',
          ProductionQuantity: '78',
          productedNum: 70,
        },
        {
          online_time: '8:25',
          partNO: '359951',
          work_order: 'W0862',
          ProductionQuantity: '78',
          productedNum: 0,
        },
        {
          online_time: '8:25',
          partNO: '359951',
          work_order: 'W0862',
          ProductionQuantity: '78',
          productedNum: 0,
        },
        {
          online_time: '8:25',
          partNO: '359951',
          work_order: 'W0862',
          ProductionQuantity: '78',
          productedNum: 0,
        },

        {
          online_time: '8:25',
          partNO: '359951',
          work_order: 'W0862',
          ProductionQuantity: '78',
          productedNum: 0,
        },
      ],
    }
  },
  mounted() {
    this.drawChart()
  },
  components: {
    digitalFlop,
  },

  methods: {
    rowClassName({ rowIndex }) {
      if ([0].includes(rowIndex)) {
        return {
          backgroundColor: '#24eb2c',
          color: '#ffffff',
        }
      } else {
        return null
      }
    },
    // 饼图配置
    drawChart() {
      this.$nextTick(() => {
        var chartDom = document.getElementById('process')
        const data = [
          { value: 70, name: '已经完成' },
          { value: 30, name: '未完成' },
        ]
        var myChart = echarts.init(chartDom, 'dark')
        var option
        option = {
          backgroundColor: '',
          title: {
            text: '实时生产进度',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '已经生产' },
                { value: 735, name: '未生产' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }

        option && myChart.setOption(option)

        //监听，根据视口变化动态从新渲染表格
        window.addEventListener('resize', function () {
          myChart.resize()
        })

        var chartDom1 = document.getElementById('status')
        var myChart1 = echarts.init(chartDom1, 'dark')
        var option1
        option1 = {
          backgroundColor: '',
          title: {
            text: '异常停机统计',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '正常' },
                { value: 735, name: '宕机' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }

        option1 && myChart1.setOption(option1)

        //监听，根据视口变化动态从新渲染表格
        window.addEventListener('resize', function () {
          myChart1.resize()
        })

        var chartDom2 = document.getElementById('goodrate')
        const data2 = [
          { value: 70, name: '合格产品' },
          { value: 30, name: '不合格产品' },
        ]
        var myChart2 = echarts.init(chartDom2, 'dark')
        var option2
        option2 = {
          backgroundColor: '',
          title: {
            text: '合格率',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: data2,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }

        option2 && myChart2.setOption(option2)

        //监听，根据视口变化动态从新渲染表格
        window.addEventListener('resize', function () {
          myChart2.resize()
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>

h1 {
  text-align: center;
}
.charts {
  height: 200px;
}
::v-deep .vxe-table--render-default {
  font-size: 30px;
}
</style>
